<template>
  <div ref="chartRef" :style="{ width, height }"></div>
</template>
<script lang="ts" setup>
  import { Ref, ref, watch } from 'vue'
  import { useECharts } from '@/hooks/useEcharts'
  const props = defineProps({
    loading: Boolean,
    width: {
      type: String,
      default: '400px',
    },
    height: {
      type: String,
      default: '400px',
    },
    chartDetailData: {
      type: Object,
      default: () => ({}),
    },
  })
  const nameArr = [
    {
      name: '名字1',
      icon: 'circle',
    },
    {
      name: '名字2',
      icon: 'circle',
    },
    {
      name: '名字3',
      icon: 'circle',
    },
  ]
  const chartRef = ref<HTMLDivElement | null>(null)
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
  function init() {
    setOptions({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      color: ['#49F756', '#FE606D', '#5066E1'],
      legend: {
        data: nameArr,
        bottom: 0,
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '14%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: props.chartDetailData.map((v) => v.time),
          axisLabel: {
            padding: [20, 0],
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
        },
      ],
      series: ['human1', 'human2', 'human3'].map((v, vIdx) => ({
        name: nameArr[vIdx]?.name,
        sommth: true,
        type: 'line',
        data: props.chartDetailData.map((comp) => comp[v]),
      })),
    })
  }
  watch(
    () => props.chartDetailData,
    (val) => {
      init()
    },
    {
      immediate: true,
    }
  )
</script>
